<template>
  <div class="row justify-content-center">
    <div class="col-8">
      <form name="editForm" role="form" novalidate v-on:submit.prevent="save()">
        <h2 id="roomAdminApp.roomSupportingFacilities.home.createOrEditLabel" data-cy="RoomSupportingFacilitiesCreateUpdateHeading">
          Create or edit a RoomSupportingFacilities
        </h2>
        <div>
          <div class="form-group" v-if="roomSupportingFacilities.id">
            <label for="id">ID</label>
            <input type="text" class="form-control" id="id" name="id" v-model="roomSupportingFacilities.id" readonly />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-washer">Washer</label>
            <input
              type="checkbox"
              class="form-check"
              name="washer"
              id="room-supporting-facilities-washer"
              data-cy="washer"
              :class="{ valid: !$v.roomSupportingFacilities.washer.$invalid, invalid: $v.roomSupportingFacilities.washer.$invalid }"
              v-model="$v.roomSupportingFacilities.washer.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-airCondition">Air Condition</label>
            <input
              type="checkbox"
              class="form-check"
              name="airCondition"
              id="room-supporting-facilities-airCondition"
              data-cy="airCondition"
              :class="{
                valid: !$v.roomSupportingFacilities.airCondition.$invalid,
                invalid: $v.roomSupportingFacilities.airCondition.$invalid,
              }"
              v-model="$v.roomSupportingFacilities.airCondition.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-waterHeater">Water Heater</label>
            <input
              type="checkbox"
              class="form-check"
              name="waterHeater"
              id="room-supporting-facilities-waterHeater"
              data-cy="waterHeater"
              :class="{
                valid: !$v.roomSupportingFacilities.waterHeater.$invalid,
                invalid: $v.roomSupportingFacilities.waterHeater.$invalid,
              }"
              v-model="$v.roomSupportingFacilities.waterHeater.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-bed">Bed</label>
            <input
              type="checkbox"
              class="form-check"
              name="bed"
              id="room-supporting-facilities-bed"
              data-cy="bed"
              :class="{ valid: !$v.roomSupportingFacilities.bed.$invalid, invalid: $v.roomSupportingFacilities.bed.$invalid }"
              v-model="$v.roomSupportingFacilities.bed.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-heating">Heating</label>
            <input
              type="checkbox"
              class="form-check"
              name="heating"
              id="room-supporting-facilities-heating"
              data-cy="heating"
              :class="{ valid: !$v.roomSupportingFacilities.heating.$invalid, invalid: $v.roomSupportingFacilities.heating.$invalid }"
              v-model="$v.roomSupportingFacilities.heating.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-wardrobe">Wardrobe</label>
            <input
              type="checkbox"
              class="form-check"
              name="wardrobe"
              id="room-supporting-facilities-wardrobe"
              data-cy="wardrobe"
              :class="{ valid: !$v.roomSupportingFacilities.wardrobe.$invalid, invalid: $v.roomSupportingFacilities.wardrobe.$invalid }"
              v-model="$v.roomSupportingFacilities.wardrobe.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-refrigerator">Refrigerator</label>
            <input
              type="checkbox"
              class="form-check"
              name="refrigerator"
              id="room-supporting-facilities-refrigerator"
              data-cy="refrigerator"
              :class="{
                valid: !$v.roomSupportingFacilities.refrigerator.$invalid,
                invalid: $v.roomSupportingFacilities.refrigerator.$invalid,
              }"
              v-model="$v.roomSupportingFacilities.refrigerator.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-naturalGas">Natural Gas</label>
            <input
              type="checkbox"
              class="form-check"
              name="naturalGas"
              id="room-supporting-facilities-naturalGas"
              data-cy="naturalGas"
              :class="{ valid: !$v.roomSupportingFacilities.naturalGas.$invalid, invalid: $v.roomSupportingFacilities.naturalGas.$invalid }"
              v-model="$v.roomSupportingFacilities.naturalGas.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-internet">Internet</label>
            <input
              type="checkbox"
              class="form-check"
              name="internet"
              id="room-supporting-facilities-internet"
              data-cy="internet"
              :class="{ valid: !$v.roomSupportingFacilities.internet.$invalid, invalid: $v.roomSupportingFacilities.internet.$invalid }"
              v-model="$v.roomSupportingFacilities.internet.$model"
            />
          </div>
          <div class="form-group">
            <label class="form-control-label" for="room-supporting-facilities-television">Television</label>
            <input
              type="checkbox"
              class="form-check"
              name="television"
              id="room-supporting-facilities-television"
              data-cy="television"
              :class="{ valid: !$v.roomSupportingFacilities.television.$invalid, invalid: $v.roomSupportingFacilities.television.$invalid }"
              v-model="$v.roomSupportingFacilities.television.$model"
            />
          </div>
        </div>
        <div>
          <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" v-on:click="previousState()">
            <font-awesome-icon icon="ban"></font-awesome-icon>&nbsp;<span>Cancel</span>
          </button>
          <button
            type="submit"
            id="save-entity"
            data-cy="entityCreateSaveButton"
            :disabled="$v.roomSupportingFacilities.$invalid || isSaving"
            class="btn btn-primary"
          >
            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;<span>Save</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
<script lang="ts" src="./room-supporting-facilities-update.component.ts"></script>
